iT邦幫忙

2021 iThome 鐵人賽

DAY 20
1
Modern Web

ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#系列 第 20

Day 20 - 將 NEWS 後台儲存資料提取後,送至前台渲染畫面 (下) - News View Page InnerText 應用 - ASP.NET Web Forms C#

  • 分享至 

  • xImage
  •  

=x= 🌵 NEWS 前台 View 頁面後端功能製作。


NEWS View 頁面資料介紹 :

https://ithelp.ithome.com.tw/upload/images/20211004/20139487ejkwjYga5L.jpg

📌 新聞內容頁則比較單純,由新聞標題、新聞主要內容區、新聞組圖,這3個區塊組成。



NEWS View 頁面後端實作 :

1. 新增 news_view.aspx 參考之前的實作,將原始的 news_view.html 內容複製並整理進頁面。


2. 分別加入新聞內容及新聞組圖的 Literal 控制項

https://ithelp.ithome.com.tw/upload/images/20211004/20139487YorZ7Qfdvw.jpg

  • 🌵 新聞標題用原本的 HTML 標籤即可,記得加上runat="server"這樣才抓得到。


3. 參考以下程式碼分別設定控制項數值及使用 SQL CTE 語法取出對應的新聞列表資料

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        loadNews();
    }
}

private void loadNews()
{
    List<ImagePath> savePathList = new List<ImagePath>();
    string guidStr = Request.QueryString["id"];
    //如果沒有網址傳值就導回新聞列表頁
    if (String.IsNullOrEmpty(guidStr)) {
        Response.Redirect("~/Tayanahtml/new_list.aspx");
    }
    //依取得 guid 連線資料庫取得新聞資料
    SqlConnection connection = new SqlConnection(WebConfigurationManager.ConnectionStrings["TayanaYachtConnectionString"].ConnectionString);
    string sql = "SELECT * FROM News WHERE guid = @guid";
    SqlCommand command = new SqlCommand(sql, connection);
    command.Parameters.AddWithValue("@guid", guidStr.Trim());
    connection.Open();
    SqlDataReader reader = command.ExecuteReader();
    if (reader.Read()) {
        //渲染新聞標題
        newsTitle.InnerText = reader["headline"].ToString();
        //渲染新聞主文
        newsContent.Text = HttpUtility.HtmlDecode(reader["newsContentHtml"].ToString());
        string loadJson = HttpUtility.HtmlDecode(reader["newsImageJson"].ToString());
        //反序列化 JSON 格式
        savePathList = JsonConvert.DeserializeObject<List<ImagePath>>(loadJson);
    }
    connection.Close();
    //渲染新聞組圖
    if (savePathList?.Count > 0) {
        string imgHtmlStr = "";
        foreach (var item in savePathList) {
            imgHtmlStr += $"<p><img alt='Image' src='upload/Images/{item.SavePath}' style='width: 700px;' /></p>";
        }
        groupImg.Text = HttpUtility.HtmlDecode(imgHtmlStr);
    }
}

//用來接收組圖 JSON 資料
public class ImagePath
{
    public string SavePath { get; set; }
}
  • 🌵 新聞標題用 .InnerText 設定 HTML 標籤的文字內容。

  • 🌵 組圖的 HTML 需加入寬度樣式,限制圖片尺寸,否則有些圖片會超出版面。


4. 模擬頁面後測試確認新聞內容資料,完成 ~



本日總結 :

📢 今天內容比較單純,可以當成複習之前的操作,比較有趣的部份是意外發現有 .InnerText 這個方法,使用起來很方便而且不會影響外觀樣式,感覺之後可以多多使用在不需送 HTML 標籤的地方。

  • 明日將介紹 Home Page 後台製作相關細節。

上一篇
Day 19 - 將 NEWS 後台儲存資料提取後,送至前台渲染畫面 (上) - News List Page CTE 暫存表應用 - ASP.NET Web Forms C#
下一篇
Day 21 - 依 Home 前台頁面分析拆解後,逐步建立後台功能 - GridView 事件應用 - ASP.NET Web Forms C#
系列文
ASP.NET Web Forms 入門 - 30天建立遊艇網頁專案後端及後台功能 C#30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言